import clsx from "clsx";
import styles from "./index.module.css";
import type { PropType } from "vue";
import { EnumChatMsgExecutedState, EnumChatMessageType, EnumSender, EnumMyChatCardAction, EnumMyChatCardIcon, type MyChatMsgResult } from "@/api/siderBar/model";
import type { MessageListAnyEvent } from "./types";
import GpFontIcon from "@/components/GpFontIcon/index.vue";

const requestCardTypes = [EnumChatMessageType.求职者发简历, EnumChatMessageType.求职者换微信, EnumChatMessageType.求职者换手机]
const specialMessageTypes = [
    EnumChatMessageType.文本,
    EnumChatMessageType.图片,
    EnumChatMessageType.视频,
    EnumChatMessageType.语音,
    EnumChatMessageType.文件,
    EnumChatMessageType.位置,
    EnumChatMessageType.简历,
    EnumChatMessageType.手机,
    EnumChatMessageType.微信,
    EnumChatMessageType.系统,
]
const interviewInviteMap = new Map([
    [EnumChatMessageType.HR约面试, { content: "发送了面试邀请", icon: "icon-ic_xianchangmianshi" }],
    [EnumChatMessageType.求职者同意面试邀请, { content: "接受了面试邀请", icon: "icon-xuanzhong" }],
    [EnumChatMessageType.求职者拒绝面试邀请, { content: "拒绝了面试邀请", icon: "icon-guanbi" }],
])
const interviewInviteTypes = Array.from(interviewInviteMap.keys())
function isSpecialMessage(message: MyChatMsgResult) {
    return specialMessageTypes.includes(message.type)
}
function isRequestCardType(message: MyChatMsgResult) {
    return requestCardTypes.includes(message.type)
}
const MessageList = defineComponent({
    name: "MessageList",
    props: {
        messages: {
            type: Object as PropType<MyChatMsgResult[]>,
            required: true
        }
    },
    emits: {
        any: (payload: MessageListAnyEvent) => typeof payload.type === "string"
    },
    setup(props, { emit }) {
        function renderMessage(message: MyChatMsgResult) {
            if (message.type === EnumChatMessageType.文本) {
                return renderTextContent(message)
            } else if (isRequestCardType(message)) {
                return renderRequestCard(message)
            } else if (isSpecialMessage(message)) {
                // TODO: 待定
            } else if (message.type === EnumChatMessageType.求职者同意发送简历) {
                if (message.content) {
                    return (
                        <div key={message.id}>
                            {renderTipMessage(message)}
                            {renderResumePreviewCard(message)}
                        </div>
                    )
                }
                return renderResumePreviewCard(message)
            } else if ([EnumChatMessageType.求职者同意换手机, EnumChatMessageType.求职者同意换微信].includes(message.type)) {
                return renderReplyCard(message)
            } else if (interviewInviteTypes.includes(message.type)) {
                return renderInterviewText(message)
            } else if (message.content) {
                return renderTipMessage(message)
            }
            return null
        }
        function renderTime(message: MyChatMsgResult) {
            return (
                <div class="text-secondary text-xs !leading-4">
                    {dateFormat(message.createTime)}
                </div>
            )
        }
        function renderTextContent(message: MyChatMsgResult) {
            return (
                <div key={message.id} class={clsx(styles.message, styles.messageNormal, {
                    'items-end ml-auto' : message.sender === EnumSender.HR
                })}>
                    {renderTime(message)}                    
                    <div class={clsx('rounded-xl text-primary text-sm !leading-6 py-3 px-4 w-fit', 
                        message.sender === EnumSender.HR ? 'bg-[#F0F6FF] !rounded-tr-none' : 'bg-theme/16 !rounded-tl-none'
                    )}>
                        {message.content}
                    </div>
                </div>
            )
        }
        function renderRequestCard(message: MyChatMsgResult) {
            let icon: string;
            if (message.cardContent.icon === EnumMyChatCardIcon.简历卡片) {
                icon = withPublicPath("/images/swap-resume.png")
            } else if (message.cardContent.icon === EnumMyChatCardIcon.微信卡片) {
                icon = withPublicPath("/images/swap-wechat.png")
            } else if (message.cardContent.icon === EnumMyChatCardIcon.手机卡片) {
                icon = withPublicPath("/images/swap-mobile.png")
            }
            // @ts-ignore
            if (!icon) return null
            const rejectTypes: Array<EnumMyChatCardAction> = [
                EnumMyChatCardAction.HR拒绝交换微信,
                EnumMyChatCardAction.HR拒绝交换联系方式,
                EnumMyChatCardAction.HR拒绝接收求职者简历
            ]
            return (
                <div key={message.id} class={clsx(styles.message, styles.messageNormal)}>
                    {renderTime(message)}
                    <div class={clsx("w-[280px] p-4 rounded-xl border border-solid bg-linear-180 from-0% to-100% to-white", {
                        "border-theme/20 from-[#E9F2FF]": message.cardContent.color === "blue",
                        "border-[#00C580]/20 from-[#E6FFE7]": message.cardContent.color === "green",
                        "border-[#FD9900]/20 from-[#FFFBE3]": message.cardContent.color === "yellow",
                    })}>
                        <div class="flex flex-row items-center gap-3">
                            <img src={icon} class="size-10 block object-cover"/>
                            <div class="text-primary text-sm !leading-5">
                                {message.cardContent.title}
                            </div>
                        </div>
                        {
                            !message.executedState
                            ? (
                                <div class="flex flex-row items-center gap-[10px] mt-6">
                                    {
                                        message.cardContent.actions?.map(item => {
                                            const isRejectAction = rejectTypes.includes(item)
                                            return (
                                                <div key={item} onClick={() => emit("any", {type: "handleRequestCard", message, action: item, actionType: isRejectAction ? "reject" : "agreen"})}
                                                    class={clsx("flex-1 touchable-opacity flex flex-row justify-center items-center h-10 rounded-md text-sm",
                                                        isRejectAction
                                                        ? "text-third bg-third/10"
                                                        : {
                                                            "text-theme bg-theme/10": message.cardContent.color === "blue",
                                                            "text-[#0DAF7B] bg-[#0DAF7B]/10": message.cardContent.color === "green",
                                                            "text-[#FD9900] bg-[#FD9900]/10": message.cardContent.color === "yellow",
                                                        }
                                                    )}  
                                                >
                                                    {isRejectAction ? "拒绝" : "同意"}
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            ) : (
                                <div class="flex flex-row justify-center items-center h-10 bg-third/4 rounded-md text-third text-sm cursor-not-allowed mt-6">
                                    {message.executedState === EnumChatMsgExecutedState.同意 ? '已同意' : '已拒绝'}
                                </div>
                            )
                        }
                    </div>
                </div>
            )
        }
        function renderTipMessage(message: MyChatMsgResult) {
            return (
                <div key={message.id} class={clsx(styles.message, "text-third text-sm !leading-8 px-10 h-8 w-fit bg-third/10 rounded-2xl mx-auto")}>
                    {message.content}
                </div>
            )
        }
        function renderReplyCard(message: MyChatMsgResult) {
            let icon: string, btnText: string;
            if (message.cardContent.icon === EnumMyChatCardIcon.微信卡片) {
                icon = withPublicPath("/images/swap-wechat.png")
                btnText = "复制微信号"
            } else if (message.cardContent.icon === EnumMyChatCardIcon.手机卡片) {
                icon = withPublicPath("/images/swap-mobile.png")
                btnText = "复制手机号"
            }
            // @ts-ignore
            if (!icon) return null
            return (
                <div key={message.id} class={clsx(styles.message, "w-[280px] p-4 rounded-xl border border-solid bg-linear-180 from-0% to-100% to-white mx-auto", {
                    "border-[#00C580]/20 from-[#E6FFE7]": message.cardContent.color === "green",
                    "border-[#FD9900]/20 from-[#FFFBE3]": message.cardContent.color === "yellow",
                })}>
                    <div class="flex flex-row items-center gap-3">
                        <img src={icon} class="size-10 block object-cover"/>
                        <div class="text-primary text-sm !leading-5 flex flex-col gap-1">
                            <div>{message.cardContent.title}：</div>
                            <div>{message.cardContent.content}</div>
                        </div>
                    </div>
                    {/* @ts-ignore */}
                    {btnText && <div class={clsx("flex flex-row justify-center items-center h-10 rounded-md text-sm touchable-opacity mt-6", {
                        "bg-[#0DAF7B]/10 text-[#0DAF7B]": message.cardContent.color === "green",
                        "bg-[#FD9900]/10 text-[#FD9900]": message.cardContent.color === "yellow",
                    })} onClick={() => emit("any", {type: "copyText", content: message.cardContent.content!})}>
                        {btnText}
                    </div>}
                </div>
            )
        }
        function renderResumePreviewCard(message: MyChatMsgResult) {
            const ext = message.cardContent.content?.split(".").pop()
            return (
                <div key={message.id} class={clsx(styles.message, styles.messageNormal)}>
                    {renderTime(message)}
                    <div class="w-[280px] p-4 rounded-xl border border-solid border-theme/20 bg-linear-180 from-0% from-[#E9F2FF] to-100% to-white">
                        <div class="flex flex-row items-center gap-3">
                            <img src="/images/swap-resume.png" class="size-10 block object-cover"/>
                            <div class="text-primary text-sm !leading-5">
                                {message.cardContent.title}.{ext}
                            </div>
                        </div>
                        <div onClick={() => emit("any", {type: "previewResume", source: message.cardContent.content!})} class="flex flex-row justify-center items-center h-10 bg-theme/10 rounded-md text-theme text-sm touchable-opacity mt-6">
                            点击预览附件简历
                        </div>
                    </div>
                </div>
            )
        }
        function renderInterviewText(message: MyChatMsgResult) {
            const matched = interviewInviteMap.get(message.type)!
            return (
                <div key={message.id} class={clsx(styles.message, styles.messageNormal, {
                    'items-end ml-auto' : message.sender === EnumSender.HR
                })}>
                    {renderTime(message)}                    
                    <div class={clsx('rounded-xl text-theme text-sm !leading-6 py-3 px-4 w-fit flex flex-row items-center gap-[6px] bg-[#F0F6FF]', 
                        message.sender === EnumSender.HR ? '!rounded-tr-none' : '!rounded-tl-none'
                    )}>
                        {matched.content}
                        <GpFontIcon name={matched.icon} class={message.sender === EnumSender.HR ? 'order-1' : '-order-1'} />
                    </div>
                </div>
            )
        }
        return () => {
            return (
                <div class="box-border">
                    {props.messages.map(renderMessage)}
                </div>
            )
        }
    },
})
export default MessageList